<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { getFormRules } from "../utils/rule";
import { FormProps } from "../utils/types";
import { usePublicHooks } from "../../hooks";
import type { UploadProps } from "element-plus";
import { ElMessage } from "element-plus";
import { getConfig } from "@/config";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    Id: 0,
    Name: "",
    Logo: "",
    Address: "",
    Contact: "",
    Tel: "",
    UserCount: 0,
    UserLimit: 0,
    ChannelCount: 0,
    ChannelLimit: 0,
    DeviceLimit: 0,
    DeviceCount: 0,
    ChannelDefEnable: 0,
    Utc: 0,
    Comment: ""
  }),
  title: "" // 添加title属性的默认值
});

const ruleFormRef = ref();
const imageUrl = ref("");
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);

// 根据当前是否是修改表单，决定是否传递excludeId
const formRules = computed(() => {
  const isEdit = props.title === "修改";
  const excludeId = isEdit ? props.formInline.Id : undefined;
  return getFormRules(excludeId);
});

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  // 将上传成功返回的FileKey赋值给logo字段
  newFormInline.value.Logo = response.Data.FileKey;
  console.log("FileKey:", newFormInline.value.Logo);
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("Logo图片必须是JPG或PNG格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Logo图片大小不能超过2MB!");
    return false;
  }
  return true;
};

function getRef() {
  return ruleFormRef.value;
}
onMounted(() => {
  console.log(props.formInline);
  // 如果是编辑模式且有logo数据，设置imageUrl
  if (props.formInline.Logo) {
    const config = getConfig();
    const baseUrl = config.ApiLinkUrl
      ? config.ApiLinkUrl.replace("/server/", "")
      : "http://192.168.0.105";
    imageUrl.value = baseUrl + props.formInline.Logo;
  }
});
defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
    class="w-full"
  >
    <el-form-item label="名称" prop="Name">
      <el-input v-model="newFormInline.Name" placeholder="请输入租户名称" />
    </el-form-item>
    <el-form-item v-if="title === '修改'" label="用户限制" prop="UserLimit">
      <el-input
        v-model="newFormInline.UserLimit"
        placeholder="请输入用户限制"
        type="number"
      />
    </el-form-item>
    <el-form-item v-if="title === '修改'" label="频道限制" prop="ChannelLimit">
      <el-input
        v-model="newFormInline.ChannelLimit"
        placeholder="请输入频道限制"
        type="number"
      />
    </el-form-item>
    <el-form-item v-if="title === '修改'" label="设备限制" prop="DeviceLimit">
      <el-input
        v-model="newFormInline.DeviceLimit"
        placeholder="请输入设备限制"
        type="number"
      />
    </el-form-item>
    <el-form-item label="联系人" prop="Contact">
      <el-input v-model="newFormInline.Contact" placeholder="请输入联系人" />
    </el-form-item>
    <el-form-item label="电话" prop="Tel">
      <el-input
        v-model="newFormInline.Tel"
        placeholder="请输入联系电话"
        type="number"
        :disabled="title === '修改'"
      />
    </el-form-item>
    <el-form-item label="地址" prop="Address">
      <el-input
        v-model="newFormInline.Address"
        placeholder="请输入地址"
        type="textarea"
      />
    </el-form-item>
    <el-form-item label="Logo">
      <el-upload
        class="avatar-uploader"
        method="post"
        action="/api/File/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <!-- 添加相关备注 -->
    <el-form-item label="备注" prop="Comment">
      <el-input
        v-model="newFormInline.Comment"
        type="textarea"
        :maxlength="200"
        show-word-limit
        :rows="4"
        placeholder="请输入备注，最多200字"
      />
    </el-form-item>
  </el-form>
</template>
<style scoped>
.avatar-uploader .avatar {
  display: block;
  width: 120px;
  height: 120px;
}
</style>

<style>
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 120px;
  height: 120px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
